<template>
  <div class="table-page-search-wrapper" style="padding: 0 40px">
    <a-form
      ref="basicForm"
      :model="dataObj.basicData"
      :label-col-props="labelCol"
      :wrapper-col-props="wrapperCol"
      label-align="right"
      :rules="basicRules"
    >
      <a-row
        :gutter="[48, 6]"
        v-if="!['nodeAdd', 'nodeEdit'].includes(dataObj.mode)"
      >
        <a-col :md="8" :sm="24">
          <a-form-item label="表单名" :field="`formName`">
            <a-input v-model="dataObj.basicData.formName"></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="表单描述">
            <a-input v-model="dataObj.basicData.formDescribe"></a-input>
          </a-form-item>
        </a-col>
        <!-- <a-col :md="8" :sm="24" v-if="['noCodeAdd','noCodeEdit'].includes(dataObj.mode)">
          <a-form-item label="组件类型">
            <a-select v-model="dataObj.basicData.appType">
              <a-option value="api">api组件</a-option>
              <a-option value="task">任务组件</a-option>
              <a-option value="sdk">sdk插件组件</a-option>
            </a-select>
          </a-form-item>
        </a-col> -->
        <a-col :md="8" :sm="24" v-if="['add', 'edit'].includes(dataObj.mode)">
          <a-form-item label="权限配置">
            <a-select v-model="dataObj.basicData.dbRoleType">
              <a-option value="none">无需权限</a-option>
              <a-option value="func">功能权限</a-option>
              <a-option value="dataGroup">数据权限(用户组)</a-option>
              <a-option value="dataColumn">数据权限(字段权限)</a-option>
              <a-option value="upGroup">数据权限(上级组织)</a-option>
              <a-option value="upGroupColumn"
                >组合权限(上级组织+字段权限)</a-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24" v-if="['add', 'edit'].includes(dataObj.mode)">
          <a-form-item label="上级菜单">
            <a-tree-select
              allow-clear
              allow-search
              v-model="dataObj.basicData.upFuncId"
              :data="dataObj.upFuncIds"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="请选择"
              search-placeholder="搜索"
              :field-names="{ key: '_id', title: 'funcName', value: '_id' }"
            />
          </a-form-item>
        </a-col>
        <!-- <a-col :md="8" :sm="24" v-if="['add','edit'].includes(dataObj.mode)"> -->
        <!-- 现在不展示了，新增传0，编辑拿后端返回的 -->
        <a-col :md="8" :sm="24" v-if="[].includes(dataObj.mode)">
          <a-form-item label="菜单排序">
            <a-select v-model="dataObj.basicData.sort">
              <a-option v-for="i in 11" :key="i">{{ i - 1 }}</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24" v-if="['add', 'edit'].includes(dataObj.mode)">
          <a-form-item label="主键自增方式">
            <a-select
              v-model="dataObj.basicData.prefixWay"
              :disabled="!!dataObj.tableDesc.formId"
            >
              <a-option value="">无</a-option>
              <a-option value="1">自定义</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="24"
          v-if="
            ['add', 'edit'].includes(dataObj.mode) &&
            dataObj.basicData.prefixWay === '1'
          "
        >
          <a-form-item label="主键自增前缀">
            <a-input
              v-model="dataObj.basicData.primaryPrefix"
              :disabled="!!dataObj.tableDesc.formId"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24" v-if="['add', 'edit'].includes(dataObj.mode)">
          <a-form-item label="展示方式">
            <a-select v-model="dataObj.basicData.showType">
              <a-option value="data">标准</a-option>
              <a-option value="tree">树结构</a-option>
              <a-option value="card">卡片</a-option>
              <a-option value="timeline">时间轴</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="24"
          v-if="
            ['add', 'edit'].includes(dataObj.mode) &&
            dataObj.basicData.showType === 'tree'
          "
        >
          <a-form-item label="树结构父级字段">
            <a-select v-model="dataObj.basicData.upColumn">
              <a-option
                v-for="item in nameList"
                :key="item.dataIndex"
                :value="item.dataIndex"
                >{{ item.name }}</a-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="24"
          v-if="
            ['add', 'edit'].includes(dataObj.mode) &&
            ['timeline', 'card'].includes(dataObj.basicData.showType)
          "
        >
          <a-form-item label="表头展示">
            <a-select v-model="dataObj.basicData.cardShowField">
              <a-option
                v-for="v in basicTableDataSource"
                :key="v.formData.dataIndex"
                >{{ v.formData.name }}</a-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24" v-if="['add', 'edit'].includes(dataObj.mode)">
          <a-form-item label="租户字段">
            <a-switch v-model="dataObj.basicData.tenant"></a-switch>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24" v-if="['add', 'edit'].includes(dataObj.mode)">
          <a-form-item label="伪表">
            <a-switch v-model="dataObj.basicData.pseudoFlag"></a-switch>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24" v-if="['add', 'edit'].includes(dataObj.mode)">
          <a-form-item label="是否逻辑删除">
            <a-switch v-model="dataObj.basicData.delFlag"></a-switch>
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="24"
          v-if="dataObj.basicData.dbRoleType === 'dataGroup'"
        >
          <a-form-item label="用户组">
            <a-select v-model="dataObj.basicData.userGroupIds" multiple>
              <a-option
                v-for="item in dataObj.userGroupList"
                :key="item._id"
                :value="item._id"
              >
                {{ item.group_name }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col
          :md="8"
          :sm="24"
          v-else-if="
            ['dataColumn', 'upGroupColumn'].includes(
              dataObj.basicData.dbRoleType
            )
          "
        >
          <a-form-item label="字段权限" :field="`columnList`">
            <a-select v-model="dataObj.basicData.columnList" multiple>
              <a-option
                v-for="item in nameList"
                :key="item.dataIndex"
                :value="item.dataIndex"
                >{{ item.name }}</a-option
              >
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row
        v-if="
          ['add', 'edit', 'artAdd', 'artEdit', 'nodeAdd', 'nodeEdit'].includes(
            dataObj.mode
          )
        "
      >
        <a-tabs
          default-active-key="1"
          @change="setExKeyData"
          v-model:active-key="dataObj.basicSubActiveKey"
        >
          <a-tab-pane key="数据库属性" title="数据库属性">
            <a-button
              type="primary"
              @click="handleAddItem"
              style="margin-bottom: 10px"
              >新增</a-button
            >
            <a-checkbox
              v-if="!['nodeAdd', 'nodeEdit'].includes(dataObj.mode)"
              style="margin-left: 10px"
              v-model="dataObj.openSearchExKey"
              >展开外键字段</a-checkbox
            >
            <a-form
              :model="dataObj"
              ref="basicTableFrom"
              layout="inline"
              class="basic_table_from"
              :hide-required-mark="true"
            >
              <a-table
                :columns="columns"
                :data="basicTableDataSource"
                row-key="cid"
                :pagination="false"
                :scroll="{ x: 1000 }"
                :table-layout="'auto'"
              >
                <!-- record.formData.name -->
                <template #name="{ record, rowIndex: index }">
                  <a-form-item
                    :label="
                      record.formData.isExKey
                        ? record.formData.formName
                        : undefined
                    "
                    :field="`${record.formData.isExKey ? 'exKeysData' : 'pageData'}.${record.formData.isExKey ? record.formData.exKeyIndex : index}.formData.name`"
                    :rules="basicTableRules.name"
                  >
                    <a-input
                      style="min-width: 100px"
                      v-model="record.formData.name"
                      :disabled="
                        record.formData.isExKey || record.type === 'divider'
                      "
                    ></a-input>
                  </a-form-item>
                </template>
                <!-- record.formData.dataIndex -->
                <template #dataIndex="{ record, rowIndex: index }">
                  <a-form-item
                    :label="
                      record.formData.isExKey
                        ? record.formData.formName
                        : undefined
                    "
                    :field="`${record.formData.isExKey ? 'exKeysData' : 'pageData'}.${record.formData.isExKey ? record.formData.exKeyIndex : index}.formData.dataIndex`"
                    :rules="basicTableRules.dataIndex"
                  >
                    <a-input
                      style="min-width: 100px"
                      v-model="record.formData.dataIndex"
                      :disabled="
                        record.formData.notMod || record.formData.isExKey
                      "
                    ></a-input>
                  </a-form-item>
                </template>
                <template #explain="{ record }">
                  <a-form-item>
                    <a-input v-model="record.formData.explain"></a-input>
                  </a-form-item>
                </template>
                <template #placeholder="{ record }">
                  <a-form-item>
                    <a-input v-model="record.formData.placeholder"></a-input>
                  </a-form-item>
                </template>
                <template #defaultValue="{ record }">
                  <a-form-item>
                    <a-input v-model="record.formData.defaultValue"></a-input>
                  </a-form-item>
                </template>
                <template #select="{ record }">
                  <a-form-item>
                    <a-select v-model="record.formData.type">
                      <a-option value="string">String</a-option>
                      <a-option value="int">Int</a-option>
                    </a-select>
                  </a-form-item>
                </template>
                <template #required="{ record }">
                  <a-form-item>
                    <a-checkbox v-model="record.formData.required"></a-checkbox>
                  </a-form-item>
                </template>
                <template #fixed="{ record }">
                  <a-form-item>
                    <a-checkbox v-model="record.formData.fixed"></a-checkbox>
                  </a-form-item>
                </template>
                <template #isSearch="{ record }">
                  <a-form-item>
                    <a-checkbox v-model="record.formData.isSearch"></a-checkbox>
                  </a-form-item>
                </template>
                <template #type="{ record, rowIndex: index }">
                  <a-form-item>
                    <a-select
                      v-model="record.type"
                      @change="
                        changeControlTypes($event, record.formData, index)
                      "
                      :disabled="record.formData.isExKey"
                    >
                      <a-option
                        :value="item.value"
                        v-for="item in typeOptions"
                        :key="item.value"
                      >
                        {{ item.label }}
                      </a-option>
                    </a-select>
                  </a-form-item>
                </template>
                <template #dataType="{ record }">
                  <a-form-item>
                    <a-select
                      v-model="record.formData.dataType"
                      @change="dataTypeChange($event, record)"
                    >
                      <a-option
                        :value="item.value"
                        v-for="item in getDataTypeOptions(record.formData.type)"
                        :key="item.value"
                      >
                        {{ item.label }}
                      </a-option>
                    </a-select>
                  </a-form-item>
                </template>
                <template #controlType="{ record }">
                  <a-form-item>
                    <a-select
                      v-model="record.formData.controlType"
                      @change="changeControlType($event, record)"
                    >
                      <a-option value="1">普通查询</a-option>
                      <a-option value="2">范围查询</a-option>
                    </a-select>
                  </a-form-item>
                </template>
                <template #queryType="{ record }">
                  <a-form-item>
                    <a-select
                      v-model="record.formData.queryType"
                      :disabled="record.formData.controlType === '2'"
                    >
                      <a-option
                        :value="item.value"
                        v-for="item in queryCondition"
                        :key="item.value"
                      >
                        {{ item.label }}
                      </a-option>
                    </a-select>
                  </a-form-item>
                </template>
                <template #conditionStartQueryType="{ record }">
                  <a-form-item>
                    <a-select
                      :disabled="
                        ['1', '3'].includes(record.formData.controlType)
                      "
                      v-if="
                        record.formData.condition &&
                        record.formData.condition[0]
                      "
                      v-model="record.formData.condition[0].queryType"
                    >
                      <a-option
                        :value="item.value"
                        v-for="item in queryCondition.filter(
                          (e) => e.value == 'gt' || e.value == 'gte'
                        )"
                        :key="item.value"
                      >
                        {{ item.label }}
                      </a-option>
                    </a-select>
                  </a-form-item>
                </template>
                <template #conditionEndQueryType="{ record }">
                  <a-form-item>
                    <a-select
                      :disabled="
                        ['1', '3'].includes(record.formData.controlType)
                      "
                      v-if="
                        record.formData.condition &&
                        record.formData.condition[1]
                      "
                      v-model="record.formData.condition[1].queryType"
                    >
                      <a-option
                        :value="item.value"
                        v-for="item in queryCondition.filter(
                          (e) => e.value == 'lt' || e.value == 'lte'
                        )"
                        :key="item.value"
                      >
                        {{ item.label }}
                      </a-option>
                    </a-select>
                  </a-form-item>
                </template>
                <template #searchType="{ record }">
                  <a-form-item>
                    <a-select
                      v-model="record.formData.searchType"
                      @change="changeSearchType($event, record)"
                    >
                      <a-option
                        :value="item.value"
                        v-for="item in searchTypeOptions"
                        :key="item.value"
                      >
                        {{ item.label }}
                      </a-option>
                    </a-select>
                  </a-form-item>
                </template>
                <template #tableWidth="{ record }">
                  <a-form-item>
                    <a-space :size="0">
                      <!-- :formatter="value => `${value}px`"
                      :parser="value => value.replace('px', '')" -->
                      <a-input-number
                        style="width: 65%"
                        v-model="record.formData.tableWidth"
                      />
                      <a-input
                        disabled
                        value="px"
                        style="
                          width: 35%;
                          text-align: center;
                          background: #f5f5f5;
                        "
                      />
                    </a-space>
                  </a-form-item>
                </template>
                <template #nextRelation="{ record }">
                  <a-form-item>
                    <a-select
                      v-model="record.formData.nextRelation"
                      :disabled="record.formData.controlType === '2'"
                    >
                      <a-option value="and">并且</a-option>
                      <a-option value="or">或</a-option>
                      <a-option
                        v-if="record.formData.controlType === '2'"
                        value="between"
                        >之间</a-option
                      >
                    </a-select>
                  </a-form-item>
                </template>
                <template #action="{ record, rowIndex: index }">
                  <a
                    @click="handleDeleteFormDataItem(index, record)"
                    class="g-delete-button"
                    v-if="!record.formData.isExKey"
                    >删除</a
                  >
                </template>
              </a-table>
            </a-form>
          </a-tab-pane>
          <a-tab-pane
            key="查询配置"
            title="查询配置"
            v-if="
              !['artAdd', 'artEdit', 'nodeAdd', 'nodeEdit'].includes(
                dataObj.mode
              )
            "
          >
            <!-- <a-checkbox style="margin-bottom: 10px" v-model="dataObj.openSearchExKey">展开外键字段</a-checkbox> -->
            <a-form
              :model="dataObj"
              ref="searchTableFrom"
              layout="inline"
              class="basic_table_from"
              :hide-required-mark="true"
            >
              <conditionGroup
                v-if="
                  !['artAdd', 'artEdit', 'nodeAdd', 'nodeEdit'].includes(
                    dataObj.mode
                  )
                "
              />
            </a-form>
          </a-tab-pane>
          <a-tab-pane
            key="默认字段"
            title="默认字段"
            v-if="
              !['artAdd', 'artEdit', 'nodeAdd', 'nodeEdit'].includes(
                dataObj.mode
              )
            "
          >
            <a-table
              :columns="columns2"
              :data="dataObj.defaultKeys"
              row-key="cid"
              :pagination="false"
            >
              <!-- <span slot="action" slot-scope="text, record, index" v-if="record.formData.dataIndex !== '_id'">
                <a @click="handleDeleteDefaultKey(index)" class="g-delete-button">删除</a>
              </span> -->
              <template #nameAction="{ record }">
                <a-input
                  v-model="record.formData.name"
                  :disabled="!record.operate"
                ></a-input>
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane
            key="externalKey"
            title="关联外键"
            v-if="
              !['artAdd', 'artEdit', 'nodeAdd', 'nodeEdit'].includes(
                dataObj.mode
              )
            "
          >
            <external-key></external-key>
          </a-tab-pane>
          <a-tab-pane
            key="排序"
            title="排序"
            v-if="
              !['artAdd', 'artEdit', 'nodeAdd', 'nodeEdit'].includes(
                dataObj.mode
              )
            "
          >
            <a-button type="primary" @click="handleAddSort">新增</a-button>
            <a-form
              :model="dataObj"
              ref="tableSortForm"
              layout="inline"
              class="basic_table_from"
              :hide-required-mark="true"
            >
              <a-table
                :columns="columnsSort"
                :data="dataObj.sortData"
                row-key="orderId"
                :pagination="false"
                :scroll="{ x: 1000 }"
                :components="componentsGroup"
              >
                <template #dataIndex="{ record }">
                  <a-form-item>
                    <a-select v-model="record.orderKey" placeholder="请选择">
                      <a-option
                        v-for="item in nameList"
                        :key="item.dataIndex"
                        :value="item.dataIndex"
                        >{{ item.name }}
                      </a-option>
                    </a-select>
                  </a-form-item>
                </template>
                <template #sort="{ record }">
                  <a-form-item>
                    <a-select v-model="record.orderValue" placeholder="请选择">
                      <a-option value="asc">升序</a-option>
                      <a-option value="desc">降序</a-option>
                    </a-select>
                  </a-form-item>
                </template>
                <template #action="{ rowIndex: index }">
                  <a @click="handleDeleteSortKey(index)" class="g-delete-button"
                    >删除</a
                  >
                </template>
              </a-table>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="字段校验" title="字段校验">
            <!-- <a-button type="primary" @click="handleAddCheck">新增</a-button> -->
            <a-form
              :model="dataObj"
              ref="tableRulesForm"
              layout="inline"
              class="basic_table_from"
              :hide-required-mark="true"
            >
              <verificationList />

              <a-table
                :columns="columns"
                :data="dataObj.pageData"
                :pagination="false"
                row-key="cid"
              >
                <template #changeRule="{ record }">
                  <a-form-item>
                    <a-select v-model="record.changeRule" placeholder="请选择">
                      <a-option
                        v-for="item in changeRuleOptions"
                        :key="item.value"
                        :value="item.value"
                      >
                        {{ item.label }}
                      </a-option>
                    </a-select>
                  </a-form-item>
                </template>
                <template #fields="{ record }">
                  <a-form-item>
                    <a-select
                      v-model="record.fields"
                      placeholder="请选择"
                      multiple
                      :filter-option="filterOption"
                    >
                      <a-option
                        v-for="item in pageNameList"
                        :key="item.dataIndex"
                        :value="item.dataIndex"
                      >
                        {{ item.name }}
                      </a-option>
                    </a-select>
                  </a-form-item>
                </template>
                <template #ruleInfo="{ record, rowIndex: index }">
                  <a-form-item
                    v-if="
                      ['numRange', 'length', 'size'].includes(record.changeRule)
                    "
                    :rules="[
                      {
                        validator: validateMinMax,
                        trigger: 'change',
                        index: index,
                      },
                    ]"
                  >
                    <a-input
                      :precision="
                        ['length', 'size'].includes(record.changeRule)
                          ? 0
                          : undefined
                      "
                      placeholder="请输入"
                      style="width: 45%"
                      v-model="record.min"
                    ></a-input>
                    <div
                      style="
                        display: inline-flex;
                        justify-content: center;
                        width: 5%;
                      "
                    >
                      ~
                    </div>
                    <a-input
                      :precision="
                        ['length', 'size'].includes(record.changeRule)
                          ? 0
                          : undefined
                      "
                      placeholder="请输入"
                      style="width: 45%"
                      v-model="record.max"
                      @change="
                        $refs.tableRulesForm.validateField(
                          `rulesData.${index}.minMax`
                        )
                      "
                    ></a-input>
                  </a-form-item>
                  <a-form-item
                    v-else-if="!['eMail', 'repeat'].includes(record.changeRule)"
                  >
                    <a-input
                      placeholder="请输入"
                      v-model="record.ruleInfo"
                    ></a-input>
                  </a-form-item>
                  <a-form-item v-else>
                    <a-input placeholder="" :disabled="true"></a-input>
                  </a-form-item>
                </template>
                <template #action="{ rowIndex: index }">
                  <a @click="handleDeleteRule(index)" class="g-delete-button"
                    >删除</a
                  >
                </template>
              </a-table>
            </a-form>
          </a-tab-pane>
        </a-tabs>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import {
  basicDefaultData,
  changeRuleOptions,
  componentTypeFileName,
  queryCondition,
  searchTypeOptions,
  typeOptions,
} from "./base/options";
import tableDraggable from "@/components/Form/base/tableDraggable.vue";
import ExternalKey from "@/components/Form/base/externalKey.vue";
import conditionGroup from "@/components/Form/conditionGroup.vue";
import verificationList from "@/components/Form/verification/verificationList.vue";
import { nanoid } from "nanoid";
import axios from "axios";
import _ from "lodash";
import { changeControlTypes } from "@/mixins/methodsMixins";

export default {
  name: "BasicInfo",
  components: {
    ExternalKey,
    conditionGroup,
    verificationList,
  },
  computed: {
    basicTableDataSource() {
      return this.dataObj.pageData
        .concat(this.dataObj.openSearchExKey ? this.dataObj.exKeysData : [])
        .filter(
          (item) => !item.hasOwnProperty("isSendData") || item.isSendData
        );
    },
    nameList() {
      return this.dataObj.pageData
        .concat(this.dataObj.defaultKeys)
        .filter((item) => item.formData.dataIndex && item.formData.name)
        .map((item) => {
          return {
            name: item.formData.name,
            dataIndex: item.formData.dataIndex,
          };
        });
    },
    pageNameList() {
      return this.dataObj.pageData
        .filter((item) => item.formData.dataIndex && item.formData.name)
        .map((item) => {
          return {
            name: item.formData.name,
            dataIndex: item.formData.dataIndex,
          };
        });
    },
  },
  data() {
    return {
      typeOptions,
      componentsGroup: {
        body: {
          wrapper: tableDraggable,
        },
      },
      queryCondition,
      searchTypeOptions,
      changeRuleOptions,
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      basicRules: {
        formName: [
          { required: true, message: "必填" },
          {
            validator: this.checkTableName,
          },
        ],
        columnList: [{ required: true, message: "必填" }],
      },
      basicTableRules: {
        name: [{ required: true, message: "必填" }],
        dataIndex: [{ required: true, message: "必填" }],
      },
      tableRules: {},
      columnsSort: [
        {
          title: "字段",
          dataIndex: "dataIndex",
          width: 400,
          slotName: "dataIndex",
        },
        {
          title: "排序方式",
          dataIndex: "sort",
          width: 400,
          slotName: "sort",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "left",
          slotName: "action",
        },
      ],
      columnsCheck: [
        {
          title: "规则",
          dataIndex: "changeRule",
          width: 400,
          slotName: "changeRule",
        },
        {
          title: "检验字段",
          dataIndex: "fields",
          width: 400,
          slotName: "fields",
        },
        {
          title: "规则内容",
          dataIndex: "ruleInfo",
          width: 400,
          slotName: "ruleInfo",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "left",
          slotName: "action",
        },
      ],
      columns: [
        {
          title: "字段名称",
          dataIndex: "formData.name",
          slotName: "name",
        },
        {
          title: "数据绑定key",
          dataIndex: "formData.dataIndex",
          slotName: "dataIndex",
        },
        {
          title: "控件类型",
          dataIndex: "formData.type",
          slotName: "type",
        },
        {
          title: "数据类型",
          dataIndex: "formData.dataType",
          width: "150px",
          slotName: "dataType",
          // }, {
          //   title: '内容提示',
          //   dataIndex: 'formData.placeholder',
          //   scopedSlots: { customRender: 'placeholder' }
          // }, {
          //   title: '默认值',
          //   dataIndex: 'formData.defaultValue',
          //   scopedSlots: { customRender: 'defaultValue' }
        },
        {
          title: "必填",
          dataIndex: "formData.required",
          align: "center",
          slotName: "required",
        },
        {
          title: "固定列",
          dataIndex: "formData.fixed",
          align: "center",
          slotName: "fixed",
        },
        {
          title: "表格列宽",
          dataIndex: "formData.tableWidth",
          width: "150px",
          align: "center",
          slotName: "tableWidth",
        },
        {
          title: "操作",
          dataIndex: "action",
          slotName: "action",
        },
      ],
      columns2: [
        {
          title: "字段名称",
          dataIndex: "name",
          width: "300px",
          slotName: "nameAction",
        },
        {
          title: "数据绑定key",
          width: "300px",
          dataIndex: "formData.dataIndex",
        },
        {
          title: "数据类型",
          dataIndex: "formData.dataType",
          customRender: (text, record) => {
            return record.variable || text;
          },
        },
      ],
      searchColumns: [
        {
          title: "是否查询",
          dataIndex: "formData.isSearch",
          align: "center",
          width: "50px",
          slotName: "isSearch",
        },
        {
          title: "字段名称",
          dataIndex: "formData.name",
          width: "200px",
          slotName: "name",
        },
        {
          title: "数据绑定key",
          dataIndex: "formData.dataIndex",
          width: "200px",
          slotName: "dataIndex",
        },
        {
          title: "查询类型",
          dataIndex: "formData.controlType",
          slotName: "controlType",
        },
        {
          title: "查询控件",
          dataIndex: "formData.searchType",
          slotName: "searchType",
        },
        {
          title: "查询条件",
          dataIndex: "formData.queryType",
          slotName: "queryType",
        },
        {
          title: "范围查询1",
          dataIndex: "formData.condition.0.queryType",
          slotName: "conditionStartQueryType",
        },
        {
          title: "范围查询2",
          dataIndex: "formData.condition.1.queryType",
          slotName: "conditionEndQueryType",
        },
        {
          title: "条件关系",
          dataIndex: "formData.nextRelation",
          slotName: "nextRelation",
          // }, {
          //   title: '查询字段名称1',
          //   dataIndex: 'formData.condition1',
          //   width: 150,
          //   scopedSlots: { customRender: 'condition1' }
          // }, {
          //   title: '查询字段名称2',
          //   dataIndex: 'formData.condition2',
          //   width: 150,
          //   scopedSlots: { customRender: 'condition2' }
          // }, {
          //   title: '字段备注',
          //   dataIndex: 'formData.explain',
          //   scopedSlots: { customRender: 'explain' }
        },
      ],
    };
  },
  inject: ["dataObj"],
  methods: {
    // updateTableQueryGroupReqDTOList (value) {
    //   // 更新父组件中的数据
    //   console.log(value, 'valvlavalvalval0------')
    //   // this.$set(ros, 'between', [
    //   this.$set(this.dataObj.tableDesc, 'tableQueryGroupReqDTOList', value)

    //   // this.dataObj.tableDesc.tableQueryGroupReqDTOList = value
    //   console.log('Updated tableQueryGroupReqDTOList:', this.dataObj)
    // },
    validateMinMax(rule, value, callback) {
      const index = rule.index;
      const record = this.dataObj.rulesData[index];
      if (record.min !== undefined && record.max !== undefined) {
        if (record.min && ["", undefined, null].includes(record.max)) {
          callback();
        } else if (record.max && ["", undefined, null].includes(record.min)) {
          callback();
        } else if (record.min > record.max) {
          console.log(record.min, record.max);
          callback(new Error(`最小值必须小于最大值`));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    // 下拉框按label搜索
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    // 查询条件类型改变
    changeSearchType(type, item) {
      console.log(type);
      if (type === "date") {
        item.formData.searchFormat = "YYYY-MM-DD HH:mm:ss";
      } else if (type === "date2") {
        item.formData.searchFormat = "YYYY-MM-DD";
      } else if (type === "date3") {
        item.formData.searchFormat = "YYYY-MM";
      } else {
        item.formData.searchFormat = "";
      }
    },
    dataTypeChange(e, item) {
      console.log(e, item);
      const { type, dataType } = item.formData;
      if (type === "select") {
        // 下拉框
        if (dataType === "timestamp") {
          item.formData.typeFormat = "YYYY-MM-DD";
        }
      }
    },
    // 处理条件发送的columnKey是否带表名
    setExSpecialKey(item, sItem) {
      const { masterMeterName } = item;
      const bindMasterKey = item.data[0].masterMeter.dataIndex;
      const columnKey =
        (item.subMeterName ? item.subMeterName + "." : "") + sItem.dataIndex;
      return masterMeterName !== ""
        ? masterMeterName + "." + bindMasterKey + "|" + columnKey
        : bindMasterKey + "|" + columnKey;
    },
    // 重组一个新格式的exKeysData给配置外键的查询功能
    setExKeyData() {
      const _exKeysData = _.cloneDeep(this.dataObj.exKeysData);
      this.dataObj.exKeysData = [];

      this.dataObj.tableExConfig.forEach((item) => {
        if (!item.displayFields && item.displayFieIds) {
          // 字母拼错了，兼容下
          item.displayFields = item.displayFieIds;
          item.selectedShowFields = item.selectedShowFieIds;
          item.selectFields = item.selectFieIds;

          delete item.displayFieIds;
          delete item.selectedShowFieIds;
          delete item.selectFieIds;
        }
        item.displayFields.forEach((sItem) => {
          // 判断数组中没有重复的表及值出现
          const isSubMasterOk = this.dataObj.exKeysData.every(
            (item) =>
              item?.formData.bindSubKey !== sItem.key &&
              item?.formData.subMeterName !== item.subMeterName
          );
          if (item.subMeterId && isSubMasterOk) {
            const oldData =
              _exKeysData.find(
                (e) =>
                  e.formData.searchDataKey === this.setExSpecialKey(item, sItem)
              ) || {};
            const obj = {
              cid: oldData.cid ? oldData.cid : nanoid(16),
              icon: "edit",
              type: "input",
              name: "exKey",
              isSendData: true,
              formData: {
                ..._.omitBy(basicDefaultData(), _.isUndefined),
                ...(oldData.formData || {}),
                type: "input",
                wrapperCol: 24,
                columnAdd: false,
                columnEdit: false,
                columnQuery: false,
                isExKey: true,
                exKeyIndex: this.dataObj.exKeysData.length, // 排序
                dataIndex:
                  (item.subMeterName ? item.subMeterName + "." : "") +
                  sItem.dataIndex, // 外表 表名.字段名
                searchDataKey: this.setExSpecialKey(item, sItem),
                name: sItem.name,
                masterMeterName: item.masterMeterName, // 数据库表名
                masterFormName: item.masterFormName, // 表单名
                subMeterName: item.subMeterName, // 副表名数据库表名
                subFormName: item.subFormName, // 副表表单名
                bindMasterKey: item.data[0].masterMeter.dataIndex, // 主表的绑定字段
                bindSubKey: item.data[0].subMeter.dataIndex, // 副表的绑定字段
                dataType: sItem.columnType, // 数据类型，后端给的
                anotherName: sItem.anotherName, // 字段别名
                displayWay: item.displayWay, // 外键展示方式
              },
            };
            this.dataObj.exKeysData.push(obj);
          }
        });
      });
    },
    checkTableName: async function (rule, value, callback) {
      if (this.dataObj.tableDesc.formId) {
        // 编辑时不需判断名称重复
        return;
      }
      if (!["add", "edit"].includes(this.dataObj.mode)) {
        return callback();
      }
      try {
        this.source && this.source.cancel(); // 取消请求
        this.source = axios.CancelToken.source();
        const { data } = await this.$http.get("/tableInfo/checkTableName", {
          params: { formName: value },
          cancelToken: this.source.token,
        });
        if (data) {
          callback();
        } else {
          // eslint-disable-next-line standard/no-callback-literal
          callback(new Error("名称重复"));
        }
      } catch (e) {
        console.error("请求失败", e);
        callback();
      }
    },
    // 勾选查询类型时执行
    changeSearch(e, item) {
      const { checked } = e.target;
      if (checked) {
        item.condition[0].queryKey = item.dataIndex;
      } else {
        item.condition[0].queryKey = "";
      }
    },
    // 根据字段类型，获取数据类型选项
    getDataTypeOptions(type) {
      const fileName = componentTypeFileName[type]; // 文件名字
      if (fileName) {
        const { dataTypeOptions } = require("./formViews/" + fileName + ".vue");
        return dataTypeOptions || [];
      } else {
        return [];
      }
    },
    changeControlTypes,
    // 查询类型
    changeControlType(e, item) {
      if (e === "2") {
        item.formData.nextRelation = "between";
        item.formData.queryType = "";
        item.formData.condition[0].queryType = "gte";
        item.formData.condition[1].queryType = "lte";
      } else if (e === "3") {
        item.formData.nextRelation = "and";
        item.formData.queryType = "if";
        item.formData.condition[0].queryType = "";
        item.formData.condition[1].queryType = "";
      } else {
        item.formData.nextRelation = "and";
        item.formData.queryType = "eq";
        item.formData.condition[0].queryType = "";
        item.formData.condition[1].queryType = "";
      }
    },
    // 新增一个字段
    handleAddItem() {
      this.dataObj.$refs.formLeft.addClick();
    },
    // 新增排序字段
    handleAddSort() {
      this.dataObj.sortData.push({
        orderId: nanoid(10),
        orderKey: "",
        orderSort: "desc",
      });
    },
    // 新增字段校验规则
    handleAddCheck() {
      this.dataObj.rulesData.push({
        cid: nanoid(10),
        changeRule: "",
        fields: [],
        ruleInfo: "",
        min: undefined,
        max: undefined,
      });
    },
    // 删除默认字段
    handleDeleteDefaultKey(index) {
      this.dataObj.defaultKeys.splice(index, 1);
    },
    // 删除排序数组字段
    handleDeleteSort(index) {
      this.dataObj.sortData.splice(index, 1);
    },
    // 删除字段校验规则
    handleDeleteRule(index) {
      this.dataObj.rulesData.splice(index, 1);
    },
    handleDeleteFormDataItem(index, record) {
      // 判断是否已关联外键 是则不能删除
      const hasExTable = this.dataObj.tableExConfig.find((item) =>
        item.data.some((e) => e.cid === record.cid)
      );
      if (hasExTable) {
        // 存在关联外键不能删除
        this.$message.warn("已关联外键，请先删除外键关系");
        return;
      }
      const { cid } = record;
      const i = this.dataObj.pageData.findIndex((item) => item.cid === cid); // 用CID去找才准确
      this.dataObj.selectIndex = undefined;
      this.dataObj.pageData.splice(i, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.table-page-search-wrapper /deep/ .arco-tabs-nav-scroll {
  text-align: left;
}

.basic_table_from /deep/ .arco-form-item {
  margin-bottom: 5px;
}

.arco-row /deep/ .arco-form-item {
  margin-bottom: 8px;
}
</style>
